<template>
	<view class="count p-20">
		<view class="">
			<view class="btn f f-a-c f-j-b" :plain="true">
				<view class="left">
					昵称
				</view>
				<view class="right f f-a-c">
					<input type="nickname" @change="changeFn" v-model="nickname" name="" id="">
					<image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</view>
			<view class="xian"></view>
		</view>
		<view class="">
			<button open-type="chooseAvatar" @chooseavatar="chooseavatarFn" class="btn f f-a-c f-j-b" :plain="true">
				<view class="left">
					头像
				</view>
				<view class="right f f-a-c">
					<image :src="avatar||'/static/logo.png'" class="avart" mode=""></image>
					<image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</button>
			<view class="xian"></view>
		</view>
		<view class="">
			<button @click="EditName(1)" class="btn f f-a-c f-j-b" :plain="true">
				<view class="left">
					姓名
				</view>
				<view class="right f f-a-c">
					{{name||'---'}}
					<image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</button>
			<view class="xian"></view>
		</view>
		<view class="">
			<button @click="EditName(2)" class="btn f f-a-c f-j-b" :plain="true">
				<view class="left">
					身份证号
				</view>
				<view class="right f f-a-c">
					{{id_card}}
					<image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</button>
			<view class="xian"></view>
		</view>
		<view class="">
			<button @click="AgeFn" class="btn f f-a-c f-j-b" :plain="true">
				<view class="left">
					年龄
				</view>
				<view class="right f f-a-c">
					{{selector[num]||'--'}}岁 <image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</button>
			<view class="xian"></view>
		</view>
		<view class="">
			<button @click="NianJi" class="btn f f-a-c f-j-b" :plain="true">
				<view class="left f f-a-c ">
					年级 <text>(选填)</text>
				</view>
				<view class="right f f-a-c">
					{{selectors[sixth]||'--'}}
					<image src="/static/my/you.png" class="arrow" mode=""></image>
				</view>
			</button>
			<view class="xian"></view>
		</view>
		<view @click="comfigBtn" class="comfigBtn">
			确认
		</view>
		<!-- 这是弹出层 -->
		<u-popup mode="center" width="80%" border-radius="20" v-model="show">
			<view class="body">
				<view class="topName">
					修改姓名
				</view>
				<!-- 这个是inp wqweq-->
				<input type="text" v-model="name" class="inp" name="" id="">
				<view @click="qurenComgif" class="confirm">
					确认修改
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" width="80%" border-radius="20" v-model="showCart">
			<view class="body">
				<view class="topName">
					修改身份证
				</view>
				<!-- 这个是 -->
				<input type="text" v-model="id_card" class="inp" name="" id="">
				<view @click="qurenCart" class="confirm">
					确认
				</view>
			</view>
		</u-popup>
		<!-- age -->
		<u-picker :range="selector" v-model="shows" @confirm="confirmFn" :default-selector="[0]"
			mode="selector"></u-picker>
		<!-- 年纪 -->
		<u-picker :range="selectors" v-model="showss" @confirm="confirmFns" :default-selector="[0]"
			mode="selector"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				numItem: 1,
				showCart: false,
				nickname: uni.getStorageSync('userinfo').nickname,
				id_card: uni.getStorageSync('userinfo').id_card,
				selector: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
					27, 28, 29, 30
				],
				selectors: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一', '高二', '高三', '小班', '中班',
					'大班'
				],
				showss: false,
				shows: false,
				name: uni.getStorageSync('userinfo').realname,
				show: false,
				userinfo: uni.getStorageSync('userinfo'),
				avatar: uni.getStorageSync('userinfo').avatar,
				age: '1',
				sixth: Number(uni.getStorageSync('userinfo').grade) - 1 || 1, //年纪
				num: Number(uni.getStorageSync('userinfo').age) - 1, //年龄
			}
		},
		onShow() {
			this.randomString()
		},
		methods: {
			changeFn(e) {
				this.nickname = e.detail.value
			},
			// /修改昵称
			qurenComgif(e) {
				this.show = false
			},
			qurenCart(e) {
				this.showCart = false
			},

			//修改头像
			chooseavatarFn(e) {
				uni.uploadFile({
					url: uni.getStorageSync('upload_domain'), // 上传地址
					filePath: e.detail.avatarUrl, // 要上传的文件路径
					name: 'file', // 上传文件对应的 key 值
					method: 'POST',
					formData: {
						key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
						token: uni.getStorageSync('upload_token'),
					},
					success: (uploadRes) => {
						// 上传成功处理逻辑
						console.log(uploadRes, '000000000000000000000000');
						this.$msg('上传成功')
						let url = JSON.parse(uploadRes.data).key
						this.avatar = uni.getStorageSync('domain') + '/' + url
					},
					fail: function(error) {
						// 上传失败处理逻辑
						console.log(error, '111111111111111');
						this.$msg('上传失败')
					},
					complete: function() {}
				});
			},
			// 点击确认
			async comfigBtn() {
				let n = await this.$api.ProfilePost({
					avatar: this.avatar,
					nickname: this.nickname,
					realname: this.name,
					age: this.selector[this.num],
					grade: this.sixth + 1,
					id_card: this.id_card
				})
				if (n.status) {
					this.$msg('修改成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			// /点击年纪
			NianJi() {
				this.showss = true
			},
			// /点击年龄
			AgeFn() {
				this.shows = true
			},
			// /点击确认
			confirmFn(e) {
				this.num = e[0]
			}, // /点击确认
			confirmFns(e) {
				this.sixth = e[0]
			},
			// 点击姓名
			EditName(num) {
				if (num === 1) {
					this.show = true
				} else {
					this.showCart = true
				}
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		padding: 20rpx;
	}

	.comfigBtn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		margin: 0 auto;
		margin-top: 250rpx;
		text-align: center;
		color: #fff;
		font-weight: 600;
		background-color: #2b9939;
	}

	.confirm {
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #ce4032;
		color: #fff;
		margin: 0rpx auto;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.inp {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #dcd9d9;
		border-radius: 15rpx;
		margin: 40rpx 0;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.topName {
		width: 1005;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 600;
		text-align: center;
		color: #1a1a1a;
		box-sizing: border-box;
	}

	.xian {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fff;
	}

	.btn {
		height: 100rpx;
		width: 100%;
		padding: 0;
		margin: 0;
		border: none;

		.right {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: right;
			color: #1a1a1a;

			.avart {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}

			.arrow {
				margin-left: 15rpx;
				width: 12rpx;
				height: 22rpx;
			}
		}

		.left {
			text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				margin-left: 20rpx;
				color: #999999;
			}

			// height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC,
			PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #1a1a1a;


		}
	}
</style>